<!--
 * @Author: wangze@linkstec.com
 * @Date: 2022-01-21 15:46:22
 * @Function: 基础表格的混入
-->
<script>
import { ConfigTable } from '@/config';
export default {
  // 定义属性
  data () {
    return {
      // 表格唯一id，对应config/table里的配置路径，‘表格所在路由.表格所在组件’
      tableKey: '',
      //  查询入参
      queryParam: {},
      // 查询结果-表格数据
      tableData: [],
      // 分页设置
      paginations: {
        currentPage: 1, // 当前页
        pageSize: 10,
        total: 0 // 总条数
      },
      // 排序设置
      sorters: {
        sortField: null,
        sortDirection: null
      },
      multipleSelection: [], // 多选时选中行list
      tableLoading: true
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    orderType () {
      return this.sorters.sortDirection === 'A' ? '1' : '2';
    },
    // 表格查询接口
    queryApi () {
      return this.tableConfig.queryApi;
    },
    // 表格列配置
    columns () {
      return this.tableConfig.columns;
    },
    // 表格配置项
    tableConfig () {
      const dft = {
        queryApi () {},
        columns: []
      };
      if (!this.tableKey) return dft;
      const path = this.tableKey.split('.');
      return path.length < 2 ? dft : path.reduce((prev, item) => {
        return prev[item];
      }, ConfigTable);
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 表格查询入参获取
    apiParams () { return new Promise(resolve => resolve({})); },
    // 表格查询成功回调
    queryTableCallback () {},
    // 表格查询失败回调
    queryTableError () {},
    // 格式化查询参数
    formatParams (queryParam) {
      return {};
    },

    // 合并全部入参
    mergeAllParams () {
      var param = Object.assign(
        {},
        this.queryParam,
        this.formatParams ? this.formatParams(this.queryParam) : {},
        this.paginations,
        this.sorters
      );
      return param;
    },

    // 查询表格数据
    async queryTableData (config) {
      const configDefault = {
        showSkeleton: 1, // 是否显示骨架屏
        showLoading: 0 // 是否显示全屏加载
      };
      config = { ...configDefault, ...config };
      if (!this.queryApi) {
        config.showSkeleton && (this.tableLoading = false);
        return;
      }
      try {
        const params = await this.apiParams();
        config.showSkeleton && (this.tableLoading = true);
        this.queryApi(params, { showLoading: config.showLoading }).then(res => {
          config.showSkeleton && (this.tableLoading = false);
          this.queryTableCallback(res);
        }).catch(err => {
          !err.__CANCEL__ && config.showSkeleton && (this.tableLoading = false);
          this.queryTableError(err);
        });
      } catch (e) {
        config.showSkeleton && (this.tableLoading = false);
        console.info(`[TableMixin] queryTableData fail. table key ${this.tableKey}. errormsg: ${e}`);
      }
    },

    // 表格事件-表格排序
    onSortChange ({ column, prop, order }) {
      this.sorters.sortField = prop;
      this.sorters.sortDirection = order === 'ascending' ? 'A' : 'D'; // "ascending" "descending"
      this.queryTableData({ showSkeleton: 0, showLoading: 1 });// 查询表格数据
    },

    // 分页事件-pageSize 改变时会触发/currentPage 改变时会触发\用户点击上一页按钮改变当前页后触发\用户点击下一页按钮改变当前页后触发
    onPaginationChange ({ currentPage, pageSize, type }) {
      if (type === 'pageSize') {
        this.paginations.pageSize = pageSize;
      } else {
        this.paginations.currentPage = currentPage;
      }
      // 如果不是前端分页,请求接口获取下一页
      if (!this.tableConfig.frontEndSplitPage) {
        this.queryTableData({ showSkeleton: 0, showLoading: 1 });// 查询表格数据
      }
      //  else {
      //   // 如果是前端分页，模拟loading
      //   this.tableLoading = true;
      //   setTimeout(() => {
      //     this.tableLoading = false;
      //   }, 100);
      // }
    },
    // 查询，当前页重置为1
    queryTableDataPageOne () {
      this.paginations.currentPage = 1;
      this.sorters.sortField = null;
      this.sorters.sortDirection = null;
      // 清除sortMixin里的排序数据
      if (this.sortList && this.sortList.length) {
        this.sortList = [];
      }
      this.queryTableData();
    }

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    if (!this.queryApi) {
      this.tableLoading = false;
    }
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
